<template>
  <div class="role__wrapper">
    <!-- 查询 -->
    <div class="role__top">
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item label="审批状态">
          <el-select v-model="queryForm.applyState" placeholder="请选择">
            <el-option :value="0" label="所有"></el-option>
            <el-option :value="1" label="待审批"></el-option>
            <el-option :value="2" label="审批中"></el-option>
            <el-option :value="3" label="审批拒绝"></el-option>
            <el-option :value="4" label="审批通过"></el-option>
            <el-option :value="5" label="作废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getleaveList">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /查询 -->
    <!-- 表格 -->
    <div class="role__bottom">
      <el-table :data="leaveList" style="width: 100%">
        <el-table-column
          v-for="item in tableColum"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
          :align="item.align"
        >
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <!-- 审核按钮必须具有权限,并且当前审批人是自身，并且审批状态为待审批，审批中 -->
          <template #default="scope">
            <el-button
              size="mini"
              @click="checkTheDetails(scope.row)"
              v-has:check="'approve-check'"
              v-if="
                scope.row.curAuditUserName == userInfo.userName &&
                [1, 2].includes(scope.row.applyState)
              "
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 表格结束 -->
  </div>
  <!-- 查看详情弹窗 -->
  <el-dialog title="审批详情" v-model="detaiDialog" width="30%">
    <el-form :model="approveForm" label-suffix=":">
      <el-form-item label="申请人">
        {{ detail.applyUser.userName }}
      </el-form-item>
      <el-form-item label="休假类型">
        {{ detail.applyTypeName }}
      </el-form-item>
      <el-form-item label="休假时间">
        {{ detail.time }}
      </el-form-item>
      <el-form-item label="休假时长">
        {{ detail.leaveTime }}
      </el-form-item>
      <el-form-item label="休假原因">
        {{ detail.reason }}
      </el-form-item>
      <el-form-item label="审批状态">
        {{ detail.applyStateName }}
      </el-form-item>
      <el-form-item label="审批人">
        {{ detail.curAuditUserName }}
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="approveForm.remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" @click="handleAppRove('bh')">驳回</el-button>
        <el-button type="primary" @click="handleAppRove('pz')">批准</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import util from '@/utils/utils.js'
export default {
  name: 'Approve',
  data () {
    return {
      queryForm: {
        applyState: 1
      },
      approveForm: {},
      detaiDialog: false,
      userInfo: this.$store.state.userInfo,
      page: {
        pageNum: 1,
        pageSize: 8,
      },
      leaveList: [],
      detail: {},
      tableColum: [
        {
          prop: 'orderNo',
          label: "申请单号"
        }, {
          prop: '',
          label: "申请人",
          formatter (row) {
            return row.applyUser.userName
          }
        }, {
          prop: '',
          label: "休假时间",
          formatter (row) {
            return util.formateDate(new Date(row.startTime), 'yyyy-MM-dd')
              + "到" + util.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
          }
        }, {
          prop: 'leaveTime',
          label: "休假时长",
          align: 'center'
        }, {
          prop: 'applyType',
          label: "休假类型",
          align: 'center',
          formatter (row, cloum, value) {
            return {
              1: '事假',
              2: '调休',
              3: '年假'
            }[value]
          }
        }, {
          prop: 'reason',
          label: "休假原因",
          align: 'center',
        }, {
          prop: 'startTime',
          label: "申请时间",
          align: 'center',
          formatter (row, cloumn, value) {
            return (util.formateDate(new Date(value), "yyy-MM-dd-hh"))
          }
        }, {
          prop: 'auditUser',
          label: "审批人"
        }, {
          prop: 'curAuditUserName',
          label: "当前审批人",
          align: 'center',
        }, {
          prop: 'applyState',
          label: "审批状态",
          align: 'center',
          formatter (row, cloumn, value) {
            // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
            return {
              1: '待审批',
              2: '审批中',
              3: '审批拒绝',
              4: '审批通过',
              5: '作废'
            }[value]
          }
        }
      ],
    }
  },
  methods: {
    /**
     * @type 表单重置对象
     */
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * @type 分页按钮事件
     */
    handleCurrentChange (curren) {
      this.page.pageNum = curren
      this.getleaveList()
    },
    /**
     * @type 请求列表接口事件
     */
    async getleaveList () {
      let params = { ...this.page, ...this.queryForm, type: "approve" }
      const { list, page } = await this.$api.getLeaveList(params)
      this.leaveList = list;
      this.page.total = page.total
    },
    /**
     * @type 查看详情
     */
    checkTheDetails (row) {
      const data = { ...row }
      data.applyTypeName = {
        //申请类型  1:事假 2：调休 3:年假
        1: "事假",
        2: "调休",
        3: "年假"
      }[data.applyType]
      data.time = (util.formateDate(new Date(data.startTime), "yyyy-MM-dd") + '到' + util.formateDate(new Date(data.endTime), "yyyy-MM-dd"))
      data.applyStateName = {
        // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
        1: "待审批",
        2: "审批中",
        3: "审批拒绝",
        4: "审批通过",
        5: "作废"
      }[data.applyState]
      this.detail = data
      this.detaiDialog = true
    },
    /** @type 审批 */
    async handleAppRove (action) {
      let params = {
        _id: this.detail._id,
        remark: this.approveForm.remark,
        action
      }
      try {
        const res = await this.$api.leaveApprove(params);
        if (res) {
          this.detaiDialog = false
          this.$message.success('处理成功')
          this.getleaveList()
          this.$store.commit('savenotifyCount', this.$store.state.notifyCount - 1)
        }
      } catch (error) {
        this.$message.error('网络异常，稍后重试')
      }
    },
  },
  mounted () {
    this.getleaveList()
  }
}
</script>

<style lang="scss" scoped>
.role__wrapper {
  background: #fff;
}
.role__top {
  height: 0.8rem;
  padding: 0.24rem;
  border-bottom: 0.01rem solid #ebeef1;
}
.role__bottom {
  background: #ebeef1;
  padding-top: 0.3rem;
  .active {
    background: #fff;
    padding: 0.27rem;
  }
  .pages {
    text-align: right;
    padding: 0.1rem 0.27rem;
    background: #fff;
  }
}
</style>